/*
* @Author: wangliang
* @Date: 2018/4/11
* @description: 产品服务
*/
<template>
    <div class="custom-box p-20 m-t-20">
        <el-row>
            <el-col :span="20" class="ca-title">
                <h3>产品服务 ({{totalCount}})</h3>
                <button type="button" 
                    class="custom-btn custom-btn-round m-l-15"
                    @click="add()">
                    <i class="fa fa-plus"></i>
                </button>
                <Operate
                :operateType="'operativeProducts'"
                @getOperateNum="getOperateNum"
                />
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="data"
            stripe
            style="width: 100%">
            <el-table-column
                label="产品图标"
                align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.logoUrl" style="width: 30px; height: 30px;"/>
                </template>
            </el-table-column>
            <el-table-column
                label="产品名称"
                prop="product"
                align="center">
            </el-table-column>
            <el-table-column
                label="产品简称"
                prop="filterName"
                align="center">
            </el-table-column>
            <el-table-column
                label="产品简述"
                prop="intro"
                align="center">
            </el-table-column>
            <el-table-column
                label="产品分类"
                prop="type"
                align="center">
            </el-table-column>
            <el-table-column
                label="领域"
                prop="classes"
                align="center">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button  type="text" @click="edit(scope.row)">编辑</el-button>
                    <el-button  type="text" @click="deleteId(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="m-t-20" >
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page="pageParam.pageIndex"
                :page-size="10"
                :total="totalCount">
            </el-pagination>
        </div>
        <!-- 编辑产品服务 -->
        <el-dialog title="产品服务" :visible.sync="dialogVisible" :show-close="false" width="35%">
            <el-form :model="comProduct" :rules="rules" ref="productForm">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="产品名称" label-width="90px" prop="product">
                            <el-input v-model="comProduct.product"></el-input>
                        </el-form-item>
                        <el-form-item label="产品简称" label-width="90px" prop="filterName">
                            <el-input v-model="comProduct.filterName"></el-input>
                        </el-form-item>
                        <el-form-item label="产品分类" label-width="90px" prop="type">
                            <!-- <el-input v-model="comProduct.type"></el-input> -->
                            <!-- <el-autocomplete v-model="comProduct.type"  
                             :fetch-suggestions="seachBusiness"
                             :trigger-on-focus="false">
                            </el-autocomplete> -->
                              <el-autocomplete v-model="comProduct.type"  
                              :fetch-suggestions="seachType">
                             </el-autocomplete>
                        </el-form-item>
                        <el-form-item label="领域" label-width="90px">
                            <el-input v-model="comProduct.classes"></el-input>
                        </el-form-item>
                        <el-form-item label="Logo" label-width="90px">
                            <logoImg
                            ref="logoImg"
                            @onSuccess="onSuccess"
                            :src='comProduct.logoUrl' />
                        </el-form-item>
                        <el-form-item label="产品简述" label-width="90px" prop="intro">
                            <el-input v-model="comProduct.intro" type="textarea" :rows='5' resize='none'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button type="primary" round @click="uploadPicture()">保存</el-button>
                <el-button round @click="close()">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import { ComProductDto, PageParam } from '../../../../../api/Interface';
import ProductService from '../../../../../service/subject/company/other-info/index';
import BasicInfoService from '../../../../../service/subject/company/basic-info/index';
import Logo from '../../../../../components/logo/index.vue';
import OperateBtn from '../operate-btn/index.vue';
@Component({
  components: {
      logoImg: Logo,
      Operate: OperateBtn,
  }
})
export default class BasicInfo extends Vue {
    // 初始化数据 相当于data
    // public msg: number = 123;
    public comProduct: ComProductDto = {} as ComProductDto; // <PersonVo> {}
    public pageParam: PageParam = {pageIndex: 1, pageSize: 10} as PageParam; // <PersonVo> {}
    public data: object[] = [];
    public status: string = '添加';
    public totalCount: number = 0;
    public operateNum: number = 2;
    public inputValue: string = '';
    public dialogVisible: boolean = false;
    public rules = {
        product: [ { required: true, message: '请输入产品名称', trigger: 'blur' } ],
        filterName: [ { required: true, message: '请输入产品简称', trigger: 'blur' } ],
        type: [ { required: true, message: '请输入产品分类', trigger: 'blur,change' } ],
        intro: [ { required: true, message: '请输入产品简述', trigger: 'blur' } ],
    };
    // refs
    public $refs: {
        productForm: HTMLFormElement,
        logoImg: any
    };

    // watch
    @Watch('msg')
    public onChildChanged(val: string, oldVal: string) {
        return val + '***';
    }
    // 模糊搜索分类
    public async seachType(val: string, cb: (obj?: object) => void) {
        if (!val) { val = ''; }
        const res = await ProductService.searchType(val);
        const data: object[] = [];
        if (res && res.length !== 0) {
            res.map((item: string) => {
                data.push({value: item });
            });
        }
        cb(data);
    }
    // 声明周期钩子
    public mounted() {
        this.refreshList();
    }

    // 方法
    // 更改页码
    public handleCurrentChange(val: number) {
        this.pageParam.pageIndex = val;
        this.getProductList();
    }
    // 获取运营状态值
    public getOperateNum(Num: number) {
        this.operateNum = Num;
        this.getProductList();
    }
    // 添加
    public add() {
        this.dialogVisible = true;
        this.status = '添加';
        this.comProduct.logoUrl = '';
        this.comProduct = {} as ComProductDto;
        this.comProduct.logoUrl = '';
    }
    // 编辑
    public edit(info: ComProductDto) {
        this.comProduct.logoUrl = '';
        this.dialogVisible = true;
        this.status = '编辑';
        this.comProduct = info;
    }
    // 取消
    public close() {
        this.dialogVisible = false;
        this.getProductList();
        this.$refs.productForm.resetFields();
    }
    public uploadPicture() {
        this.$refs.logoImg.up(); // 上传图片触发后，会调用 onSuccess 函数，来触发保存
    }
    // logo上传
    public onSuccess(imgId: string) {
        if (imgId) {
            this.comProduct.logo = imgId;
        }
        this.save();
    }
    // 保存
    public save() {
        this.comProduct.companyId = Number(this.$route.params.itemId);
        this.$refs.productForm.validate(async (valid: boolean) => {
            if (valid) {
                if (this.status === '添加') {
                    const res = await ProductService.saveCompanyProduct(this.comProduct);
                    if (res.resCode === '0') {
                        this.$message.success('添加成功');
                        this.dialogVisible = false;
                        this.getProductList();
                    }
                } else if (this.status === '编辑') {
                    const res = await ProductService.updateCompanyProduct(this.comProduct);
                    if (res.resCode === '0') {
                        this.$message.success('修改成功');
                        this.dialogVisible = false;
                        this.getProductList();
                    }
                }
            }
        });
    }
    // 获取列表
    public async getProductList() {
        const query = {
            'pageParam.pageIndex': this.pageParam.pageIndex,
            'pageParam.pageSize': this.pageParam.pageSize,
            companyId: Number(this.$route.params.itemId),
            operate: this.operateNum,
        };
        const res = await ProductService.getCompanyProductPage(query);
        if (res.resCode === '0') {
            this.data = res.data.resultData;
            this.totalCount = res.data.totalCount;
        }
    }
    // 删除
    public deleteId(delId: number) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const res = await ProductService.deleteCompanyProduct(delId);
            if (res.resCode === '0') {
                this.$message.success('删除成功');
                this.getProductList();
            }
        }).catch(() => {
            return false;         
        });
    }
    // 获取运营标记并刷新列表
    public async refreshList() {
        const res = await BasicInfoService.getCompanyById(Number(this.$route.params.itemId));
        if (res.resCode === '0') {
            this.operateNum = res.data.productOperate;
            this.getProductList();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ca-title {
    height: 50px;
    overflow: hidden;
    line-height: 50px;
}
.ca-title h3{
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    float: left;
}
.line-h {
    line-height: 36px;
}
.addBtn {
    font-size: 22px;
    margin-top: 12px;
    margin-left: 10px;
}
.el-checkbox+.el-checkbox {
    margin-right: 10px;
}
.el-checkbox {
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
}
</style>